<template>
    <div id="User" style="padding-left:10px; padding-right: 10px; width: calc(100vw - 200px)">

        <!--    搜索区域-->
        <div style="margin: 10px 0">
            <el-input v-model="search" placeholder="请输入关键字" style="width: 20%" clearable></el-input>
            <el-button style="margin-left: 5px; background-color: #5defc1; color: white" @click="load" plain>查询</el-button>
        </div>
        <div style="margin: 10px 0">
            <el-button type="warning" plain @click="add">新增</el-button>
            <el-button type="primary" plain>导入</el-button>
            <el-button type="primary" plain>导出</el-button>
        </div>
        <el-table  :data="tableData" border stripe style="width: 100%" highlight-current-row ="true">
            <el-table-column  prop="id"   label="ID"/>
            <el-table-column prop="username" label="用户账号"/>
            <el-table-column prop="password"  label="用户密码"/>
            <el-table-column prop="easy_name"  label="昵称"/>
            <el-table-column prop="age"  label="年龄"/>
            <el-table-column prop="iphone" label="联系方式"/>
            <el-table-column prop="org_id" label="部门"/>
            <el-table-column prop="sex" label="性别"/>
            <el-table-column prop="is_del" label="用户状态">
                <template v-slot="scope">
                    <el-tag v-if ="scope.row.is_del!=0">停用</el-tag>
                    <el-tag v-if ="scope.row.is_del!=1">正常</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="地址"/>
            <el-table-column  label="操作" style="width: 100%">
                <template #default="scope">
                    <el-button size="small"  type="warning" @click="edit(scope.row)">修改</el-button>
                    <el-button size="small" type="danger" @click="remove(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
            <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length">
            </el-pagination>

            <!--新增的二级弹窗-->
            <el-dialog title="提示" v-model="dialogVisible" width="30%">
                <el-form :model="form" label-width="120px">
                    <el-form-item label="用户名">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input  type="password"  v-model="form.password"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.easy_name"></el-input>
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="form.age"></el-input>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="value" clearable placeholder="选择部门">
                            <el-option
                                    v-for="item in options"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-input v-model="form.is_del"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                        <el-input v-model="form.iphone"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio v-model="form.sex" label="男">男</el-radio>
                        <el-radio v-model="form.sex" label="女">女</el-radio>
                        <el-radio v-model="form.sex" label="未知">未知</el-radio>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input type="textarea" v-model="form.address"></el-input>
                    </el-form-item>
                </el-form>

                <template #footer>
                  <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                  </span>
                </template>

            </el-dialog>
        </div>

    </div>
</template>


<script>

    export default {
        // eslint-disable-next-line vue/multi-word-component-names
        name: "User",
        data(){
            return {
                dialogVisible:false,
                search:'',
                currentPage: 2,
                pageSize: 20,
                tableData: [],
                form: {},
                options:[{
                    value: '测试部门',
                    label: '测试部门',
                },
                    {
                        value: '测试角色',
                        label: '测试角色',
                    }],
            }
        },
        /* created（）默认执行函数，相当于init*/
        created(){
            this.load();
        },
        methods :{
            /*加载列表中用户的数据*/
            load(){
                this.$http.get("/user/userList",{params:{ pageNum: this.currentPage, pageSize: this.pageSize,search: this.search}}).then((response) =>
                {
                    if (response.status =='200' && response.data.data.length>0){
                        this.tableData = response.data.data
                    }
                   console.log(response);
                })
            },
            handleSizeChange(pageSize){//改变当前页面个数
                this.pageSize = pageSize;
                this.load();
            },
            handleCurrentChange(pageNum){//改变当前页码
                this.currentPage4 = pageNum;
                this.load();
            },
            add(){
                this.dialogVisible = true;
                this.form = {};
            },
            save(){
                if (this.form.id){//更新
                    const that = this.form;
                    this.$http.post("/user/userAdd",this.form).then(res =>{
                        console.log(res);
                        if (res.data.code==='0'){
                            this.$message({
                                type: "success",
                                message: "更新成功"
                            })
                        }else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                        this.load();//刷新表格数据
                        this.dialogVisible = false;//关闭弹窗
                    });
                }else {//新增
                    this.$http.post("/user/userAdd",this.form).then(res =>{
                        console.log(res);
                        if (res.data.code==='0'){
                            this.$message({
                                type: "success",
                                message: "新增成功"
                            })
                        }else {
                            this.$message({
                                type: "error",
                                message: res.msg
                            })
                        }
                        this.load();//刷新表格数据
                        this.dialogVisible = false;//关闭弹窗
                    });
                }

            },
            remove(row){
                this.$http.post("/user/userRemove"+"/"+row.id).then(res =>{
                    console.log(res);
                    if (res.code==='0'){
                        this.$message({
                            type: "success",
                            message: "删除成功"
                        })
                    }else {
                        this.$message({
                            type: "error",
                            message: res.msg
                        })
                    }
                    this.load();//刷新表格数据
                    this.dialogVisible = false;//关闭弹窗
                });

            },
            edit(row){
                /*需要转为json格式的，防止修改页面修改后的内容，表格也显示为最新的修改文字*/
                this.form = JSON.parse((JSON.stringify(row)));
                this.dialogVisible = true;
            },


        }


    }
</script>

<style scoped>

</style>